/**
 * Suspense: 转场组件, loading组件;
 * useState: Hooks定义变量;
 * useEffect: 渲染操作,转递数据;
 *
 * Router: BrowserRouter太长,定义的别名;
 * Switch: 一次之渲染一个组件;
 * Route: 组件路由;
 *
 * Http: 封装Ajax请求接口;
 * routerExport: 组件地址;
 */
// import React, { useEffect, useState, Suspense } from "react";
import React, { Fragment, Suspense } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
// import Http from "@utils/api";
import { routerExport } from "@router/router";
import Index from "@pages/home/home";

import History from "@/utils/history";

export default function Routers() {
  //   // 一级菜单调用
  //   const [Fmenu, setFmenu] = useState([]);
  //   useEffect(() => {
  //     Http.listOthersMenuForUser({ parentId: "1001" }).then(({ data }) => {
  //       setFmenu(data);
  //     });
  //     // eslint-disable-next-line react-hooks/exhaustive-deps
  //   }, []);
  //   console.info(Fmenu);

  const Parent = (item) => (
    <Route
      key={item.name}
      path={item.path}
      component={item.component}
      exact={item.exact}
    />
  );
  return (
    <Suspense maxDuration={500} fallback={<div>loading...</div>}>
      <Router history={History}>
        <Switch>
          {routerExport.main.map((item) => Parent(item))}
          <Index>
            {routerExport.menus.map((item) => {
              if (item.routes) {
                return (
                  <Route
                    key={item.name}
                    path={item.path}
                    render={() => (
                      <Fragment>
                        {Parent(item)}
                        {item.routes.map((val) => Parent(val))}
                      </Fragment>
                    )}
                  />
                );
              }
              return Parent(item);
            })}
          </Index>
        </Switch>
      </Router>
    </Suspense>
  );
}
